<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .btn {
        width: 100px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        user-select: none;
        box-sizing: border-box;
    }
    .btn-list {
        display: grid;
        gap: 50px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 0 5px 5px rgb(0 0 0 / 8%);
    }
    .circle {
        background-color: #148103;
        color: #fff;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    .orderList {
        background-color: #e85b30;
        color: #fff;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
</style>

<script type="text/javascript" th:src="@{/jquery-3.4.1.js}"></script>
<script>
    $(function() {
        $("#btnLoader").click(function() {
            document.getElementById("orderTable").style.visibility = "visible";
            loadOrderListAll();
        })
    })

    function loadOrderListAll() {
        $.ajax({
            url: "/queryListOrderAll",
            type: "get",
            dataType: "json",
            success: function (data) {
                // 清除旧的数据
                $("#info").html("");
                // 增加新的数据
                $.each(data, function (i, n) {
                    $("#info").append("<tr>")
                        .append("<td>" + n.id + "</td>")
                        .append("<td>" + n.orderNo + "</td>")
                        .append("<td>" + n.subject + "</td>")
                        .append("<td>" + n.totalAmount + " $</td>")
                        .append("<td>" + n.payType + "</td>")
                        .append("<td>" + n.status + "</td>")
                        .append("<td>" +
                            // TODO 这里有一个巨大的坑点：就是js调用方法传参到后端的时候，参数为较大数字时可能会发生精度丢失。
                            //      解决方案：
                            //      1、直接转成String类型形成一个字符串
                            //      2、在数字后面添加一个字符 ‘n’，表示是BigInt类型数据，可以包含更大范围的整数。
                            //         ①、结合后端的BigInteger类型，避免了精度丢失的问题
                            //         ②、请求后端之前，使用String构造函数将数字转换为字符串，避免了精度丢失的问题
                            "<input type='button' value='关闭订单' onclick='closeTrade(" + n.orderNo + "n" + "/)'>&emsp;&emsp;&emsp;&emsp;" +
                            "<input type='button' value='退款' onclick='refund(" + n.orderNo + "n" + ")'/>" +
                            "</td>")
                        .append("</tr>")
                })
            }
        })
    }

    function closeTrade(orderNo) {
        let newOrderNo = String(orderNo);
        $.ajax({
            url: "/trade/closeTrade",
            data: {
                orderNo: newOrderNo
            },
            type: "post",
            // 如果我们后端接口是没有返回数据，这里数据类型不要设置为json，Ajax接收到空数据就会误以为是json格式错误，请求就不会进行成功回调
            dataType: "json",
            success: function (data) {
                if (data.status === 200) {
                    loadOrderListAll()
                } else if (data.status === 500) {
                    alert(data.result)
                }
            }
        });
    }

    function refund(orderNo) {
        let newOrderNo = String(orderNo);
        $.ajax({
            url: "/trade/refund",
            data: {
                orderNo: newOrderNo
            },
            type: "post",
            // 如果我们后端接口是没有返回数据，这里数据类型不要设置为json，Ajax接收到空数据就会误以为是json格式错误，请求就不会进行成功回调
            dataType: "json",
            success: function (data) {
                if (data.status === 200) {
                    loadOrderListAll()
                } else if (data.status === 500) {
                    alert(data.result)
                }
            }
        });
    }
</script>

<body>
    <form action="/trade" method="get" target="_blank" style="margin-left: 520px;margin-top: 70px">
        <div>
            <label>支付方式：</label>
            <div style="margin-left: 80px">
                <label>
                    <input type="radio" checked/>支付宝
                    <input type="radio" checked disabled/>微信
                    <input type="radio" checked disabled/>银联
                </label>
            </div>
        </div>
        <br/>
        <div>
            <div>
                <button type="submit" class="btn btn-list circle">支 付</button>
                <span>&nbsp;如果您点击"支付"按钮，即表示您同意该次的执行操作</span>
            </div>
        </div>
    </form>

    <div id="foot" style="margin-left: 520px">
        <ul>
            <li>版权所有 2020-2027</li>
        </ul>
    </div>
    <hr/>

    <div align="center">
        <input type="button" id="btnLoader" class="btn btn-list orderList" value="查询订单数据" style="margin-top: 20px;margin-bottom: 20px"/>
        <table id="orderTable" style="visibility: hidden; text-align: center">
            <thead style="font-size: xx-large">
            <tr>
                <td>ID</td>
                <td style="width: 200px">订单编号</td>
                <td style="width: 200px">订单标题</td>
                <td style="width: 150px">订单金额</td>
                <td style="width: 150px">支付方式</td>
                <td style="width: 150px">订单状态</td>
                <td style="width: 250px">操作</td>
            </tr>
            </thead>
            <tbody id="info">

            </tbody>
        </table>
    </div>
</body>
</html>
